<template>
	<view class="loadFill">
		<!--  -->
		<u-sticky>
			<!-- 搜索 -->
			<view class="top">
				<view class="top_l">
					<view class="left_int"></view>
					<u--input placeholder="请输入运单号" border="none" v-model="msgForm.billNo"></u--input>
					<view class="right_int" @click="scan"></view>
				</view>
				<view class="t_button" @click="search">搜索</view>

			</view>
		</u-sticky>
		<view class="" style="padding: 0 30rpx;">
			<!-- 列表 -->
			<scroll-view @scrolltolower="lowerBottom" scroll-y="true" lower-threshold="30" class="list">
				<view class="item" v-for="(item,index) in tableData" :key="index">
					<view class="item_top">
						<view class="item_t_l">运单号</view>
						<view class="item_t_r">{{item.billNo}}</view>
					</view>
					<!-- 内容 -->
					<view class="item_cont">
						<view class="item_cont_i">
							<view class="item_cont_i_l">托运方名称</view>
							<view class="item_cont_i_r">{{item.carriageName}}</view>
						</view>
						<view class="item_cont_i left">
							<view class="item_cont_i_l">危险货物名称</view>
							<view class="item_cont_i_r">{{item.dgsName}}</view>
						</view>
						<view class="item_cont_i">
							<view class="item_cont_i_l">重量</view>
							<view class="item_cont_i_r">{{item.goodsWeight || '-'}}吨</view>
						</view>
						<view class="item_cont_i">
							<view class="item_cont_i_l">承运车辆</view>
							<view class="item_cont_i_r">{{item.vehCode}}/{{item.trailerVehCode}}</view>
						</view>
						<view class="item_cont_i">
							<view class="item_cont_i_l">驾驶员/押运员</view>
							<view class="item_cont_i_r">{{item.driverName}}/{{item.escortName}}</view>
						</view>
					</view>
					<!-- 操作 -->
					<view class="item_change" @click="goInfo(item)">装货填报</view>
				</view>
				<u-loadmore :status="loadingStatus" />
			</scroll-view>

		</view>
		<tabBar :current="3" />
	</view>
</template>

<script>
	import tabBar from '@/components/tab-bar/tab-bar.vue'
	export default {
		data() {
			return {
				msgForm: {
					billNo: '',
				},
				query: {
					current: 1,
					size: 10,
				},
				tableData: [],

				loadingStatus: 'loading',
				moreData: true,
			};
		},
		components: {

			tabBar
		},
		onLoad() {
			// 隐藏原生的tabbar,有自定义tabbar的页面都要写一遍
			uni.hideTabBar()
		},
		onShow() {
			this.msgForm = {
				billNo: '',
			}
			this.tableData = []
			//默认查询
			this.getData()
		},
		methods: {
			lowerBottom() {
				if (this.moreData) {
					this.getData()
				}
			},
			goInfo(data) {
				this.$store.commit('setloadFillData', {
					...data,
					changeType: '2'
				})
				this.$goBack(`../load-goods/load-query/loadEdit?loadRow`)
			},
			search() {
				this.query.current = 1
				this.getData()
			},

			//查询
			getData() {
				this.loadingStatus = 'loading'
				this.$api.getLoadFill({
					...this.msgForm,
					...this.query
				}).then(res => {
					this.loadingStatus = 'nomore'
					console.log(res, '装货填报查询');
					if (!res.data.data.records.length) {
						this.moreData = false
						return
					}
					this.moreData = true
					this.tableData = [...this.tableData, ...res.data.data.records]
					this.query.current = this.query.current + 1

				})
			},
			scan() {
				uni.scanCode({
					success: (res) => {
						console.log('条码类型：' + res.scanType);
						console.log('条码内容：' + res.result);
						this.$api.getLoadFill({
							qrCode: res.result
						}).then(res => {
							console.log(res, '装货填报扫码查询');
							this.tableData = res.data.data.records
						})
					}
				});
			},
		},

	}
</script>

<style lang='scss' scoped>
	.loadFill {}

	.top {
		width: calc(100% - 60rpx);
		/* background-color: pink; */
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		position: relative;

		.top_l {
			z-index: 2000;
			width: 487rpx;
			padding: 0 20rpx;
			height: 92rpx;
			display: flex;
			align-items: center;
			box-shadow: 0px 1px 8px 1px rgba(200, 200, 200, 0.31);
			background-color: #fff;
			border-radius: 10rpx;

			.left_int {
				width: 34rpx;
				height: 36rpx;
				background-image: url('/static/load_search.png');
				background-size: 100% 100%;
			}

			.right_int {
				width: 52rpx;
				height: 52rpx;
				background-image: url('/static/load_right.png');
				background-size: 100% 100%;
			}

			input {
				border: none;
				flex: 1;
				padding: 0 10rpx;
			}
		}

		.t_button {
			padding: 0;
			margin: 0;
			width: 120rpx;
			height: 92rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 1rpx 4rpx 1rpx rgba(200, 200, 200, 0.31);
			font-size: 28rpx;
			color: #007AFF;
			line-height: 92rpx;
			text-align: center;
			border-radius: 8rpx;
			border: none;
			z-index: 2000;
		}
	}

	.top::before {
		position: absolute;
		content: '';
		top: 0;
		left: 0;
		width: 100%;
		height: 75rpx;
		background-color: #007AFF;
		z-index: 1000;
	}

	/* .top::after{
		position: absolute;
		content: '';
		bottom: 0;
		left: 0;
		width: 100%;
		height: 78rpx;
		background-color: #fff;
		z-index: 500;
	} */
	.list {
		height: calc(100vh - 330rpx);
	}

	.item {
		width: calc(100% - 100rpx);
		padding: 0 50rpx 40rpx 50rpx;
		color: #333333;
		box-shadow: 0px 2px 8px 1px rgba(173, 173, 173, 0.19);
		background-color: #FFFFFF;
		border-radius: 10rpx;
		margin-bottom: 10rpx;

		.item_top {
			height: 100rpx;
			width: 100%;
			line-height: 100rpx;
			font-size: 30rpx;
			border-bottom: 2rpx solid #EEEEEE;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.item_t_r {
				color: #007AFF;
			}
		}

		.item_cont {
			width: 100%;

			.item_cont_i {
				width: 100%;
				display: flex;
				padding: 10rpx 0;

				.item_cont_i_l {
					width: 180rpx;
					color: #666666;
				}

				.item_cont_i_r {
					flex: 1;
					text-align: right;
				}
			}

			.left {
				.item_cont_i_r {
					text-align: left;
				}
			}
		}

		.item_change {
			width: 195rpx;
			height: 50rpx;
			color:#fff;
			background: #007AFF;
			border-radius: 30rpx;
			font-size: 28rpx;
			line-height: 50rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
</style>